<template>
  <div class="addFrom clear">
    <div class="att-header">
      <div class="verticalLine"></div>项目人员信息修改
      <svg title="搜索 " class="iconsousuo ic" aria-hidden="true" @click="Return">
        <use xlink:href="#iconfill-closed" />
      </svg>
    </div>
    <ul>
      <li>
        <span>登录名</span>
        <el-input v-model="input1" :readonly="true" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>密码</span>
        <el-input v-model="input2" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>真实姓名</span>
        <el-input v-model="input14" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <p>性别</p>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
      <li>
        <span>年龄</span>
        <el-input v-model="input3" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>身份证号</span>
        <el-input v-model="input4" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>手机号</span>
        <el-input v-model="input5" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>单位名称</span>
        <el-input v-model="input6" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <p>职位名称</p>
        <el-select v-model="input7" placeholder="请选择">
          <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
      <li>
        <span>紧急联系人姓名</span>
        <el-input v-model="input8" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>紧急联系人电话</span>
        <el-input v-model="input9" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>填报人名称</span>
        <el-input v-model="input10" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>注册时间</span>
        <el-input v-model="input11" :readonly="true" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>更新人名称</span>
        <el-input v-model="input12" :readonly="true" placeholder="请输入内容"></el-input>
      </li>
      <li>
        <span>更新人时间</span>
        <el-input v-model="input13" :readonly="true" placeholder="请输入内容"></el-input>
      </li>
    </ul>
    <div class="att-btn">
      <span @click="submission">提交</span>
    </div>
  </div>
</template>
<script>
import { edit,obtainPosition } from "@/service/personnel/index";
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      input7: "",
      input8: "",
      input9: "",
      input10: "",
      input11: "",
      input12: "",
      input13: "",
      input14: "",
      value1: "",
      list:"",
      options1: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ]
    };
  },
  methods: {
    Return() {
      window.history.go(-1);
    },
    submission() {
      const params = {
        id:this.$route.params.item.id,
        loginName: this.input1,
        password: this.input2,
        name: this.input14,
        sex: this.value1,
        age: this.input3,
        cardNum: this.input4,
        phoneNum: this.input5,
        unitName: this.input6,
        positionId: this.input7,
        contactName: this.input8,
        contactTel: this.input9,
        createUserId: this.input10,
        createTime: this.input11,
        upUserId: this.input12,
        updateTime: this.input13
      };
      this.$confirm("是否提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // window.console.log(params);
          edit(params);
          this.$message({
            type: "success",
            message: "提交成功!"
          });
          window.history.go(-1)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    }
  },
  created: function() {
    this.value1 = this.$route.params.item.sex;
    this.input1 = this.$route.params.item.loginName;
    this.input2 = this.$route.params.item.password;
    this.input3 = this.$route.params.item.age;
    this.input4 = this.$route.params.item.cardNum;
    this.input5 = this.$route.params.item.phoneNum;
    this.input6 = this.$route.params.item.unitName;
    this.input7 = this.$route.params.item.positionId;
    this.input8 = this.$route.params.item.contactName;
    this.input9 = this.$route.params.item.contactTel;
    this.input10 = this.$route.params.item.createUserId;
    this.input11 = this.$route.params.item.createTime;
    this.input12 = this.$route.params.item.upUserId;
    this.input13 = this.$route.params.item.updateTime;
    this.input14 = this.$route.params.item.name;
    obtainPosition().then(res=>{
      // window.console.log(res)
      this.list=res.data.obj.map(item=>{
        return {value:item.id,label:item.positionName}
      })
    })
  }
};
</script>
<style lang="scss" scoped>
.addFrom {
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
  margin: 20px;
  min-height: 664px;
  background-color: #fff;
  .att-header {
    width: calc(100% - 10px);
    height: 35px;
    line-height: 35px;
    margin: 0 5px;
    svg {
      float: right;
      margin-top: 10px;
      margin-right: 50px;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  ul {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    min-height: 500px;
    margin: 0 20px;
    li {
      width: -webkit-calc(100%/3 - 40px);
      width: -moz-calc(100%/3 - 40px);
      width: calc(100% / 3 - 40px);
      margin: 20px;
      float: left;
    }
  }
  .att-btn {
    width: 50%;
    margin: auto;
    text-align: center;
    span {
      line-height: 50px;
      text-align: center;
      border: 1px solid #1ab394;
      padding: 10px 50px;
      margin-right: 20px;
      border-radius: 6px;
      cursor: pointer;
    }
    span:nth-child(1):hover {
      background-color: rgba(0, 0, 0, 0.3);
    }
    span:nth-child(2):hover {
      background-color: #1ab394;
    }
  }
  .verticalLine {
    width: 0px;
    height: 16px;
    border: 2px solid #1ab394;
    float: left;
    margin: 7px 8px 0 8px;
  }
}
</style>